<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <link rel="stylesheet" href="../static/layui/css/layui.css">
    <link rel="stylesheet" href="../static/bootstrap-dist/css/bootstrap.min.css">
    <style>
        * {
            font-size: 12px;
        }

        .layui-icon {
            margin-top: 5px;
        }

        .layui-input-block .layui-icon {
            margin-top: 0px;
        }

        .layui-table-view {
            border: none;
            margin: 0;
        }

        .layui-table-tool {
            background-color: transparent;
        }

        .layui-panel {
            border-radius: 5px;
        }

        .fade-in-left {
            animation: fade-in-left 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
        }

        @keyframes fade-in-left {
            0% {
                transform: translateX(-50px);
                opacity: 0;
            }
            100% {
                transform: translateX(0);
                opacity: 1;
            }
        }

        .box {
            display: grid;
            place-items: center;
            text-align: center;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            position: absolute;
            z-index: 100000;
        }

        .box > i {
            font-size: 60px;
        }
    </style>
</head>
<body class="fade-in-left">
    <div class="box">
        <i><img  src="../static/logo/loading.svg" alt=""></i>
    </div>
    <div class="layui-row" style="display: none">
        <div class="layui-col-md12">
            <div class="layui-main">
                <table id="tab" class="layui-table" lay-skin="row" lay-size="lg">
                    <colgroup>
                        <col width="150">
                        <col width="200">
                        <col>
                    </colgroup>

                    <thead>
                    <tr>
                        <th colspan="5">最大收入</th>
                    </tr>
                    </thead>

                    <tbody>
                    <tr id="maxCost">

                    </tr>
                    </tbody>

                    <thead>
                    <tr>
                        <th colspan="5">最大支出</th>
                    </tr>
                    </thead>

                    <tbody>
                    <tr id="maxGet">

                    </tr>
                    </tbody>

                    <thead>
                    <tr>
                        <th colspan="5">最小收入</th>
                    </tr>
                    </thead>

                    <tbody>
                    <tr id="minCost">

                    </tr>
                    </tbody>

                    <thead>
                    <tr>
                        <th colspan="5">最小支出</th>
                    </tr>
                    </thead>

                    <tbody>
                    <tr id="minGet">

                    </tr>
                    </tbody>

                </table>

            </div>
        </div>
    </div>

<script src="../static/bootstrap-dist/js/jquery-3.5.1.js"></script>
<script src="../static/layui/layui.js"></script>
<script !src="">
    $(function (){
        layui.use(['table', 'layer', 'laydate', 'form'], function () {
            let table = layui.table;
            let layer = layui.layer;
            let laydate = layui.laydate;
            let form = layui.form;

            $.ajax({
                url : "feast",
                data : {
                    "opr" : "giftList"
                },
                dataType : "json",
                beforeSend :function (){
                },
                complete: function () {
                    $(".layui-row").show();
                    $(".box").hide();
                },
                success : function (data){
                    $("#maxCost").append("<td>" + data.maxCost.id + "</td><td>" + data.maxCost.feastName + "</td><td>" + data.maxCost.feastDate + "</td><td>" + data.maxCost.feastCost + "</td><td>" + data.maxCost.feastGet + "</td>")
                    $("#maxGet").append("<td>" + data.maxGet.id + "</td><td>" + data.maxGet.feastName + "</td><td>" + data.maxGet.feastDate + "</td><td>" + data.maxGet.feastCost + "</td><td>" + data.maxGet.feastGet + "</td>")
                    $("#minCost").append("<td>" + data.minCost.id + "</td><td>" + data.minCost.feastName + "</td><td>" + data.minCost.feastDate + "</td><td>" + data.minCost.feastCost + "</td><td>" + data.minCost.feastGet + "</td>")
                    $("#minGet").append("<td>" + data.minGet.id + "</td><td>" + data.minGet.feastName + "</td><td>" + data.minGet.feastDate + "</td><td>" + data.minGet.feastCost + "</td><td>" + data.minGet.feastGet + "</td>")
                }
            })

        });
    });

    document.getElementsByTagName('img')[0].onmousedown = function(e){
        e.preventDefault()
    };
</script>
</body>
</html>
